<template>
	<view class="content">
		<view class="video-wrapper">
			<video 
				class="video"
				:src="detailData.url"
				controls
				objectFit="fill"
				:autoplay="true"
			></video>
		</view>
		<scroll-view class="scroll" scroll-y  @scrolltolower="loadMore">
			<view class="scroll-content">
				<view class="introduce-section">
					<text class="title">{{detailData.title}}</text>
					<view class="introduce">
						<text>{{detailData.author}}</text>
						<!-- <text>105阅读</text> -->
						<text>{{detailData.time}}</text>
					</view> 
					<rich-text :nodes="detailData.content"></rich-text>
					<!-- <view class="introduce">
						<text class="introduce">简介简介简介简介简介简介，简介简介简介简介简介简介简介，简介简介简介简介简介简介。</text>
						<text class="yticon icon-xia show-icon"></text>
					</view> -->
					<view class="actions">
						<!-- <view class="action-item">
							<text class="iconfont icondianzan1 yticon"></text>
							<text>75</text>
						</view>
						<view class="action-item">
							<text class="iconfont icondianzan1 yticon reverse" ></text>
							<text>6</text>
						</view> -->
						
						<!-- <view class="action-item">
						   <button open-type="share" class="iconfont iconiconfontfenxiang yticon"></button>  
							<text>分享</text>
							
						</view>
						<view class="action-item">
							<text class="iconfont iconshoucang7 yticon active"></text>
							<text>收藏</text>
						</view> -->
					</view>
				</view>
				
				<view class="container" v-show="loading === false">
					<view class="s-header">
						<text class="tit">相关推荐</text>
					</view>
					<view class="panel-scroll-box" >
						<!-- 新闻列表  -->
						<view v-for="(item, index) in newsList" :key="index" class="news-item" @click="navToDetails(item)">
							<text :class="['title', 'title'+item.type]">{{item.title}}</text>
							<view v-if="item.images.length > 0" :class="['img-list', 'img-list'+item.type, item.images.length === 1 && item.type===3 ? 'img-list-single': '']">
								<view v-for="(imgItem, imgIndex) in item.images" :key="imgIndex" :class="['img-wrapper', 'img-wrapper'+item.type, item.images.length === 1 && item.type===3 ? 'img-wrapper-single': '']">
									<image class="img" :src="imgItem"></image>
									<view class="video-tip" v-if="item.videoSrc">
										<image class="video-tip-icon" src=""></image>
									</view>
								</view>
							</view>
							<!-- 空图片占位 -->
							<view v-else class="img-empty"></view>
							<view :class="['bot', 'bot'+item.type]">
								<text class="author">{{item.author}}</text>
								<text class="time">{{item.time_text}}</text>
							</view>
						</view>
				
						<!-- 上滑加载更多组件 -->
						<mix-load-more :status="loadMoreStatus"></mix-load-more>
					</view>
					<!-- <view class="rec-section" v-for="item in newsList" :key="item.id" @click="navToDetails(item)">
						<view class="rec-item">
							<view class="left">
								<text class="title">{{item.title}}</text>
								<view class="bot">
									<text class="author">{{item.author}}</text>
									<text class="time">{{item.time_text}}</text>
									 
								</view>
							</view>
							<view class="right" v-if="item.images.length > 0">
								<image class="img" :src="item.images[0]" mode="aspectFill"></image>
							</view>
						</view>
					</view> -->
				
					<!-- <view class="s-header">
						<text class="tit">网友评论</text>
					</view>
					<view class="evalution">
						<view  v-for="(item, index) in evaList" :key="index"
							class="eva-item"
						>
							<image :src="item.src" mode="aspectFill"></image>
							<view class="eva-right">
								<text>{{item.nickname}}</text>
								<text>{{item.time}}</text>
								<view class="zan-box">
									<text>{{item.zan}}</text>
									<text class="yticon icon-shoucang"></text>
								</view>
								<text class="content">{{item.content}}</text>
							</view>
						</view>
					</view> -->
				</view>
				<!-- 加载图标 -->
				<mixLoading class="mix-loading" v-if="loading"></mixLoading>
			</view>
		</scroll-view>
		
		<!-- <view class="bottom">
			<view class="input-box">
				<text class="yticon icon-huifu"></text>
				<input 
					class="input"
					type="text" 
					placeholder="点评一下把.." 
					placeholder-style="color:#adb1b9;"
				/>
			</view>
			<text class="confirm-btn">提交</text>
		</view> -->
	</view>
</template>

<script>
	// import json from '@/json';
	import mixLoading from '@/components/mix-loading/mix-loading';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	export default {
		components: {
			mixLoading,
			mixLoadMore
		},
		data() {
			return {
				loading: true,
				detailData: {},
				newsList: [],
				evaList: [],
				msgImgList: [],
				category_id: 0,
				loadMoreStatus: 0, //加载更多 0加载前，1加载中，2没有更多了
				refreshing: 0,
				page: 1,
				enableScroll: true,
			}
		},
		onLoad(options){ 
			this.detailData = JSON.parse(options.data);
			uni.setNavigationBarTitle({
				title: this.detailData.title
			});
			this.loadNewsList('add');
			// this.loadEvaList();
		},
		methods: {
			//获取推荐列表
			// async loadNewsList(){ 
			// 	this.$http.post('News/list', {
			// 		category_id: this.category_id,
			// 		page: 1
			// 	}).then(re => { 
			// 		let list = re.data.data;
			// 		list.length = 10;
			// 		list.forEach(item=>{
			// 			this.newsList.push(item);
			// 		}) 
			// 		this.loading = false;
			// 	});  
			// },
			//新闻列表
			loadNewsList(type) { 
				console.log(222)
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (this.loadMoreStatus === 2) {
						return;
					}
					this.loadMoreStatus = 1;
				}
			
				if (type === 'refresh') {
					// #ifdef APP-PLUS
					this.refreshing = true;
					// #endif
					this.page = 1;
				}
			
			
				this.$http.post('News/list', {
					category_id: this.category_id,
					page: this.page
				}).then(re => {
			
					let list = re.data.data;
					if (type === 'refresh') {
						this.newsList = []; //刷新前清空数组
					}
					list.forEach(item => {
						// item.id = parseInt(Math.random() * 10000);
						this.newsList.push(item);
					})
					this.loading = false;
					//下拉刷新 关闭刷新动画
					if (type === 'refresh') {
						this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						this.refreshing = false;
						// #endif
						this.loadMoreStatus = 0;
					}
					//上滑加载 处理状态
					if (type === 'add') {
						this.loadMoreStatus = re.data.current_page == re.data.last_page ? 2 : 0;
						this.page += 1;
					}
				});
			
			},
			//上滑加载
			loadMore() {
				this.loadNewsList('add');
			},
			//获取评论列表
			async loadEvaList(){
				this.evaList = await json.evaList;
			}, 
			//新闻详情
			navToDetails(item) { 
				console.log(item)
				let data = {
					id: item.id,
					title: item.title,
					author: item.author,
					time: item.time_text,
					url: item.videoSrc
				}
				let url = item.videoSrc ? 'videoDetails' : 'details';
			
				uni.navigateTo({
					url: `/pages/news/${url}?data=${JSON.stringify(data)}`
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #fff;
	}
	.video-wrapper{
		height: 422upx;
		
		.video{
			width: 100%;
			height: 100%;
		}
	}
	.scroll{
		flex: 1;
		position: relative;
		background-color: #f8f8f8;
		height: 0;
	}
	.scroll-content{
		display: flex;
		flex-direction: column;
	}
	/* 简介 */
	.introduce-section{
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		line-height: 1.5;
		
		.title{
			font-size: 36upx;
			color: #303133;
			margin-bottom: 16upx;
		}
		.introduce{
			display: flex;
			font-size: 26upx;
			color: #909399;
			
			.show-icon{
				font-size: 34upx;
				padding-left: 10upx;
			}
		}
	}
	/* 点赞等操作 */
	.actions{
		display: flex;
		align-items: center;
		line-height: 1.3;
		padding-right: 44upx;
		padding-top: 16upx;
	
		.action-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-right: 60upx;
			font-size: 24upx;
			color: #999;
		}
		.yticon{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 52upx;
			
			&.reverse{
				position: relative;
				top: 6upx;
				transform: scaleY(-1);
			}
			&.active{
				color: #ec706b;
			}
		}
		.icon-fenxiang2{
			font-weight: bold;
			font-size: 36upx;
		}
		.icon-shoucang{
			font-size: 44upx;
		}
	}
	.mix-loading{
		transform: translateY(140upx);
	}
	.s-header{
		padding: 20upx 30upx;
		font-size: 30upx;
		color: #303133;
		background: #fff;
		margin-top: 16upx;
		display: list-item;
		
		&:before{
			content: '';
			width: 0;
			height: 40upx;
			margin-right: 24upx;
			border-left: 6upx solid #ec706b;
		}
	}
	/* 推荐列表 */
	.rec-section{
		background-color: #fff;
		.rec-item{
			display: flex;
			padding: 20upx 30upx;
			position: relative;
			&:after{
				content: '';
				position: absolute;
				left: 30upx;
				right: 0;
				bottom: 0;
				height: 0;
				border-bottom: 1px solid #eee;
				transform: scaleY(50%);
			}
		}
		.left{
			flex: 1;
			padding-right: 10upx;
			overflow: hidden;
			position: relative;
			.title{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 32upx;
				color: #303133;
				line-height: 44upx;
			}
			.bot{
				position: absolute;
				left: 0;
				bottom: 4upx;
				font-size: 26upx;
				color: #909399;
			}
			.time{
				margin-left: 20upx;
			}
		}
		.right{
			width: 220upx;
			height: 140upx;
			flex-shrink: 0;
			position: relative;
			.img{
				width: 100%;
				height: 100%;
			}
			.video-tip{
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.3);
				image{
					width: 60upx;
					height:60upx; 
				}
			}
		}
	}
	/* 评论 */
	.evalution{
		display:flex;
		flex-direction:column;
		background: #fff;
		padding: 20upx 0;
	}
	
	.eva-item{
		display:flex;
		padding: 20upx 30upx;
		position: relative;
		image{
			width: 60upx;
			height: 60upx;
			border-radius: 50px;
			flex-shrink: 0;
			margin-right: 24upx;
		}
		&:after{
			content: '';
			position: absolute;
			left: 30upx;
			bottom: 0;
			right: 0;
			height: 0;
			border-bottom: 1px solid #eee;
			transform: translateY(50%);
		}
		&:last-child:after{
			border: 0;
		}
	}
	.eva-right{
		display:flex;
		flex-direction:column;
		flex: 1;
		font-size: 26upx;
		color: #909399;
		position:relative;
		.zan-box{
			display:flex;
			align-items:base-line;
			position:absolute;
			top: 10upx;
			right: 10upx;
			.yticon{
				margin-left: 8upx; 
			}
		}
		.content{
			font-size: 28upx;
			color: #333;
			padding-top:20upx;
		}
	}
	
	/* 底部 */
	.bottom{
		flex-shrink: 0;
		display: flex;
		align-items: center;
		height: 90upx;
		padding: 0 30upx;
		box-shadow: 0 -1px 3px rgba(0,0,0,.04); 
		position: relative;
		z-index: 1;
		
		.input-box{
			display: flex;
			align-items: center;
			flex: 1;
			height: 60upx;
			background: #f2f3f3;
			border-radius: 100px;
			padding-left: 30upx;
			
			.icon-huifu{
				font-size: 28upx;
				color: #909399;
			}
			.input{
				padding: 0 20upx;
				font-size: 28upx;
				color: #303133;
			}
		}
		.confirm-btn{
			font-size: 30upx;
			padding-left: 20upx;
			color: #0d9fff;
		}
	}
	
	/*******/
	.panel-scroll-box {
		height: 100%;
	
		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}
	
	/**
	 * 新闻列表 直接拿的nvue样式修改，,
	 * 一共需要修改不到10行代码, 另外px需要直接修改为upx，只有单位不一样，计算都是一样的
	 * 吐槽：难道不能在编译的时候把nuve中的upx转为px? 这样就不用修改单位了
	 */
	.video-wrapper {
		width: 100%;
		height: 440upx;
	
		.video {
			width: 100%;
		}
	}
	
	view {
		display: flex;
		flex-direction: column;
	}
	
	.img {
		width: 100%;
		height: 100%;
	}
	
	.news-item {
		position: relative;
	}
	
	/* 修改结束 */
	
	/* 新闻列表  emmm 仅供参考 */
	.news-item {
		width: 750upx;
		padding: 24upx 30upx;
		border-bottom-width: 1px;
		border-color: #eee;
		background-color: #fff;
	}
	
	.title {
		font-size: 32upx;
		color: #303133;
		line-height: 46upx;
	}
	
	.bot {
		flex-direction: row;
	}
	
	.author {
		font-size: 26upx;
		color: #aaa;
	}
	
	.time {
		font-size: 26upx;
		color: #aaa;
		margin-left: 20upx;
	}
	
	.img-list {
		flex-shrink: 0;
		flex-direction: row;
		background-color: #fff;
		width: 220upx;
		height: 140upx;
	}
	
	.img-wrapper {
		flex: 1;
		flex-direction: row;
		height: 140upx;
		position: relative;
		overflow: hidden;
	}
	
	.img {
		flex: 1;
	}
	
	.img-empty {
		height: 20upx;
	}
	
	/* 图在左 */
	.img-list1 {
		position: absolute;
		left: 30upx;
		top: 24upx;
	}
	
	.title1 {
		padding-left: 240upx;
	}
	
	.bot1 {
		padding-left: 240upx;
		margin-top: 20upx;
	}
	
	/* 图在右 */
	.img-list2 {
		position: absolute;
		right: 30upx;
		top: 24upx;
	}
	
	.title2 {
		padding-right: 210upx;
	}
	
	.bot2 {
		margin-top: 20upx;
	}
	
	/* 底部3图 */
	.img-list3 {
		width: 700upx;
		margin: 16upx 0upx;
	}
	
	.img-wrapper3 {
		margin-right: 4upx;
	}
	
	/* 底部大图 */
	.img-list-single {
		width: 690upx;
		height: 240upx;
		margin: 16upx 0upx;
	}
	
	.img-wrapper-single {
		height: 240upx;
		margin-right: 0upx;
	}
	
	.video-tip {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3);
	}
	
	.video-tip-icon {
		width: 60upx;
		height: 60upx;
	}
	/*******/
</style>
